<template>
  <div class="number-input-with-unit" :style="{ width: containerWidth }">
    <el-input
      v-model="inputValue"
      :placeholder="placeholder"
      @input="handleInput"
      @blur="handleBlur"
      :style="{ width: inputWidth }"
    >
      <template #append>
        <span class="unit">{{ unit }}</span>
      </template>
    </el-input>
  </div>
</template>

<script>
export default {
  name: 'NumberInputWithUnit',
  props: {
    value: {
      type: [Number, String],
      default: ''
    },
    unit: {
      type: String,
      default: 'px'
    },
    // 整个组件的宽度
    containerWidth: {
      type: String,
      default: '200px'
    },
    // 输入框部分的宽度（不包括单位）
    inputWidth: {
      type: String,
      default: 'calc(100% - 60px)'
    },
    placeholder: {
      type: String,
      default: '请输入数字'
    },
    // 最小值限制
    min: {
      type: Number,
      default: -Infinity
    },
    // 最大值限制
    max: {
      type: Number,
      default: Infinity
    },
    // 小数位数限制
    decimal: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      inputValue: this.value
    }
  },
  watch: {
    value(newVal) {
      this.inputValue = newVal
    }
  },
  methods: {
    handleInput(value) {
      // 过滤非数字字符（允许小数点）
      let filtered = value.replace(/[^\d.]/g, '')

      // 处理多个小数点的情况
      const decimalCount = filtered.split('.').length - 1
      if (decimalCount > 1) {
        const parts = filtered.split('.')
        filtered = parts[0] + '.' + parts.slice(1).join('')
      }

      this.inputValue = filtered
      this.$emit('input', filtered)
    },
    handleBlur() {
      let value = this.inputValue

      // 处理空值
      if (value === '' || value === null || value === undefined) {
        this.$emit('input', '')
        return
      }

      // 转换为数字
      value = Number(value)

      // 处理小数位数限制
      if (this.decimal !== null && !isNaN(value)) {
        value = Number(value.toFixed(this.decimal))
      }

      // 处理最小值限制
      if (value < this.min) {
        value = this.min
      }

      // 处理最大值限制
      if (value > this.max) {
        value = this.max
      }

      this.inputValue = isNaN(value) ? '' : value
      this.$emit('input', this.inputValue)
      this.$emit('change', this.inputValue)
    }
  }
}
</script>

<style scoped>
.number-input-with-unit {
  display: inline-block;
}

.unit {
  display: inline-block;
  width: 10px;
  text-align: center;
}
</style>
